<template>
  <div class="index" ref="appRef">
    <!-- 定部区域 -->
    <Header
      :style="{ visibility: $route.params.id ? 'hidden' : 'visible' }"
      v-if="!showDetailHeader"
      @changeAppearance="showDetailHeader = !showDetailHeader"
    ></Header>
    <DetailHeader
      @changeAppearance="showDetailHeader = !showDetailHeader"
      v-else
    />

    <!-- <div class="i-right">
      <div style="margin-right: 10px">
        <el-radio-group v-model="timeSel" size="mini" @change="changeDateSel">
          <el-radio-button label="day">近一日</el-radio-button>
          <el-radio-button label="week">近一周</el-radio-button>
          <el-radio-button label="month">近一月</el-radio-button>
        </el-radio-group>
      </div>
      <img
        src=""
        alt=""
        @click="showDetailHeader = !showDetailHeader"
      />
      <div></div>
    </div> -->
   <router-view ref="router_view"></router-view>
  </div>
</template>

<script>
import Header from "./Header.vue";
import DetailHeader from "./detailHeader.vue";
import { mapMutations, mapState } from "vuex";

export default {
  data() {
    return {
      showDetailHeader: true,
      timeSel: "day",
    };
  },
  computed: {
    ...mapState(["dateSel"]),
  },
  components: { Header, DetailHeader },
  mounted() {},
  methods: {
    ...mapMutations(["changeDate"]),
    changeDateSel(val) {
      this.changeDate(val);
      let ref_child = this.$route.name;

      // this.$refs.router_view.$refs[ref_child].getList()
    },
  },
};
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .i-right {
    position: absolute;

    display: flex;
    top: 1.25rem;
    right: 10px;
    img {
      width: 2.1875rem;
      height: 2.1875rem;
      margin: 0 10px;
    }
    section {
    }
  }
}
::v-deep {
  .el-radio-button__inner {
    border-radius: 0px !important;
  }
}
</style>
